<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<!--form表示整个表单 action="#"表示收集的数据提交到本页
    注意:每个input控件必须有name属性,否则无法提交值! -->
<!-- input的type值:
     text普通文本输入框 password密码输入框 radio单选 checkbox多选
     submit提交按钮 reset重置按钮 button普通按钮
     file文件 date日期 color颜色 range范围-->
<form action="#">
    <!-- value属性用来保存输入框的值 也可以用来给输入框设置默认值   -->
    姓名:<input type="text" name="uname" value="kk"> <br>
    <!-- 单值属性: readonly只读(只能看不能改) disabled禁用(值还不能提交)   -->
    昵称1:<input type="text" name="nickname1" value="rose1" readonly> <br>
    昵称2:<input type="text" name="nickname2" value="rose2" disabled> <br>
    密码:<input type="password" name="upwd" placeholder="请输入密码"> <br>
    密码2:<input type="password" name="upwd2" maxlength="6"> <br>
    性别:
    <input type="radio" name="gender" value="1">男
    <input type="radio" name="gender" value="0" checked>女
    <br>
    爱好:
    <input type="checkbox" name="like" value="cy">抽烟
    <input type="checkbox" name="like" value="hj" checked>喝酒
    <input type="checkbox" name="like" value="tt" checked>烫头
    <input type="checkbox" name="like" value="java">学Java
    <br>
    生日:<input type="date" name="birthday"> <br>
    幸运色:<input type="color" name="lc"> <br>
    缩放:<input type="range" name="sf"> <br>
    文件:<input type="file" name="uf"> <br>
    <br>
    喜欢的城市:
    <select name="city">
        <option value="bj">北京</option>
        <option value="cq">重庆</option>
        <option value="sz" selected>深圳</option>
        <option value="ty">太原</option>
    </select>
    <br>
    <!-- 效果:点击文字时可以选中复选框 -->
    <input type="checkbox" id="ok">
    <label for="ok">我同意以上协议</label>
    <br>
    <!-- 效果:点击文字时，输入框可以获得输入焦点光标(I)   -->
    <label for="ok2">关联文字</label>
    <input type="text" id="ok2">
    <br>
    <!-- 多行文本域   -->
    留言板：
    <textarea name="content" cols="30" rows="3" style="resize: none;">请留下你的发言吧~</textarea>
    <br>
    <input type="submit" value="点我注册">
    <input type="reset" value="点我重置">
    <input type="button" value="普通按钮">
    <button>按钮</button>
</form>
</body>
</html>